<template>
    <div class="UDAppPage">
        <!-- 内容区域 -->
        <div class="content">
            <!-- 用户信息卡片 -->
            <div class="profile-header" style="border-radius: 16px; overflow: hidden;">
                <svg @click="goBack()" t="1743402074255" class="backIcon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2913" width="20" height="20">
                    <path
                        d="M739.555556 198.599111L412.842667 525.312 739.555556 852.024889l-84.821334 84.764444-411.534222-411.477333L654.791111 113.777778z"
                        fill="#fff" p-id="2914">
                    </path>
                </svg>

                <div class="header-bg"></div>
                <div class="profile-info">
                    <div class="avatar-container">
                        <el-image v-if="userStoreObject.userInfo.id != null && userStoreObject.userInfo.avatar != null" 
                            style="width: 80px; height: 80px;border-radius: 50%;" 
                            :src="userStoreObject.userInfo.avatar" :preview-src-list="[userStoreObject.userInfo.avatar]"
                            :hide-on-click-modal="true" fit="cover" :preview-teleported="true" />

                            <img v-else-if="userStoreObject.userInfo.id != null && userStoreObject.userInfo.avatar == null" 
                                src="@/assets/pic/avatar.png" style="height: 130%;" alt="暂无头像"/>
                    </div>
                    <div class="user-basic-info">
                        <h1 class="username">{{ userStoreObject.userInfo.name }}</h1>
                        <p class="user-id">ID: {{ userStoreObject.userInfo.id }}</p>
                    </div>
                    <router-link to="/EditUserDetails" class="edit-btn" style="text-decoration: none;">
                        编辑资料
                    </router-link>
                </div>
            </div>

            <!-- 个人信息列表 -->
            <div class="info-section">
                <h3 class="section-title">基本信息</h3>

                <!-- 账号信息 -->
                <div class="info-item" @click="EditUserDetails()">
                    <div class="info-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-label">昵称</div>
                        <div class="info-value">{{ userStoreObject.userInfo.name }}</div>
                    </div>
                    <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- 手机号码 -->
                <div class="info-item" @click="EditUserDetails()">
                    <div class="info-icon phone-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-label">手机号码</div>
                        <div class="info-value">{{ formatPhone(userStoreObject.userInfo.phone) }}</div>
                    </div>
                    <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- 电子邮箱 -->
                <div class="info-item" @click="EditUserDetails()">
                    <div class="info-icon email-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-label">电子邮箱</div>
                        <div class="info-value">{{ userStoreObject.userInfo.email || '未设置' }}</div>
                    </div>
                    <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- 注册时间 -->
                <div class="info-item">
                    <div class="info-icon time-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-label">注册时间</div>
                        <div class="info-value">{{ formatDate(userStoreObject.userInfo.createTime) }}</div>
                    </div>
                    <!-- <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div> -->
                </div>

                <!-- 最后登录 -->
                <div class="info-item">
                    <div class="info-icon login-icon">
                        <i class="fas fa-sign-in-alt"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-label">最后登录</div>
                        <div class="info-value">{{ formatDate(userStoreObject.userInfo.lastLoginTime) }}</div>
                    </div>
                    <!-- <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div> -->
                </div>
            </div>

            <!-- 安全设置 -->
            <div class="info-section">
                <h3 class="section-title">安全设置</h3>

                <!-- 修改密码 -->
                <div class="info-item">
                    <div class="info-icon password-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-value">修改密码</div>
                    </div>
                    <div class="info-action">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>

                <!-- 实名认证 -->
                <!-- <div class="info-item">
                    <div class="info-icon verify-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div class="info-content">
                        <div class="info-value">实名认证</div>
                    </div>
                    <div class="info-action">
                        <span class="verify-status">已认证</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div> -->
                <div class="info-item">
                    <div class="info-icon verify-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <div @click="AuthorVerify()" class="info-content">
                        <div class="info-value">作者认证</div>
                    </div>
                    <div class="info-action">
                        <span v-if="userStoreObject.userInfo.isAuthor != 0" class="verify-status">已认证</span>
                        <span v-else class="verify-status" style="color: #f94b53;">未认证</span>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>

            <!-- 退出登录按钮 -->
            <div class="logout-button" @click="logout">
                退出登录
            </div>
        </div>

        <!--隐藏的弹窗-->
        <el-dialog v-model="AuthorVerifyDialogVisible" title="" width="500" align-center center>
            <div class="AuthorVerifyDialogBox">
                <h3>请认真填写信息</h3>
                <el-form ref="AuthorVerifyRef" :model="AuthorVerifyDTO" :rules="rules" label-width="auto" 
                    style="width: 100%;max-width: 600px;margin-top: 20px;">
                    <el-form-item prop="name" label="真实姓名">
                        <el-input v-model="AuthorVerifyDTO.name" placeholder="请输入"/>
                    </el-form-item>
                    <el-form-item prop="phone" label="联系手机号">
                        <el-input v-model="AuthorVerifyDTO.phone" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item prop="idCard" label="身份证号">
                        <el-input v-model="AuthorVerifyDTO.idCard" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item prop="verifyType" label="认证类型">
                        <el-radio-group v-model="AuthorVerifyDTO.verifyType">
                            <el-radio value=1>个人作者</el-radio>
                            <el-radio value=2>机构作者</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="AuthorVerifyDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAuthorVerifyData(AuthorVerifyRef)">提交</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, inject, reactive } from 'vue';
import { useRouter } from 'vue-router';
import type { FormInstance, FormRules } from 'element-plus'
import api from '@/api';
import { UserStore } from '@/stores/userInfoStore';
import { TipStore } from '@/stores/tipStore';

const disableCacheFor = inject('disableCacheFor') as (componentNameList: string[]) => void;
const router = useRouter();
const userStoreObject = UserStore();
const TipStoreObject = TipStore();


// 格式化手机号
const formatPhone = (phone) => {
    if (!phone) return '未设置';
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '未知';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 跳转编辑页面
const EditUserDetails = () => {
    router.push('/EditUserDetails');
};



// 返回上一页
const goBack = () => {
    router.push('/Profile');
};

// 作者认证
const AuthorVerifyDialogVisible = ref(false);
const AuthorVerifyRef = ref(null);
const AuthorVerifyDTO = ref({
    userId: userStoreObject.userInfo.id, //用户id
    name: '', //真实姓名
    phone: '', //联系手机号
    idCard: '', //身份证号
    verifyType:  '', //认证类型(1.个人作者 2.机构作者)
});
const rules = ref({
  name: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur',},
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur',
    },
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur',},
    {
    //   pattern: /^[1-9]\d{5}(18|19|20)?\d{2}((0[1-9])|(10|11|12))(([0|1|2][0-9])|10|20|30|31)\d{3}(\d|[Xx])$/,
      pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
      message: '请输入有效的身份证号',
      trigger: 'blur',
    },
  ],
  verifyType: [
    { required: true, message: '请选择验证方式', trigger: 'change',},
  ],
});


const AuthorVerify = () => {
    AuthorVerifyDialogVisible.value = true;
}

//  提交作者认证信息
const submitAuthorVerifyData = (formEl: FormInstance | undefined)=>{
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            api.authorApply(AuthorVerifyDTO.value).then(res => {
                if(res.data.code == 1){
                    TipStoreObject.successTip("提交成功");
                    AuthorVerifyDialogVisible.value = false;
                }else{
                    TipStoreObject.errorTip(res.data.msg);
                }
            })

        } else {
            //console.log('校验未通过!')
        }
    })
}



// 退出登录
const logout = async () => {
    if (confirm('确定要退出登录吗？')) {
        // 清除登录状态
        await userStoreObject.cleanUserInfo()
        localStorage.removeItem('wx_access-client')
        disableCacheFor(['Profile', 'Works']) //刷新组件的挂载，因为数据更新了
        TipStoreObject.successTip('已退出登录')
        router.push({ path: '/Profile', });
    }
};

onMounted(() => {

});
</script>

<style lang="scss" scoped>
.UDAppPage {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    background-color: #f2f2f7;
    color: #1c1c1e;
    min-height: 100vh;
}

.backIcon {
    position: absolute;
    top: 20px;
    left: 10px;
}

.user-details-header {
    padding: 16px;
    background-color: #fff;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.user-details-title {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.user-details-back {
    font-size: 16px;
    color: #007aff;
}

.content {
    padding: 16px;
}

.profile-header {
    width: 100%;
    position: relative;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.header-bg {
    height: 100px;
    background: linear-gradient(90deg, #007AFF 0%, #34C759 100%);
    width: 100%;
}

.profile-info {
    padding: 0 16px 12px;
    position: relative;
    margin-top: -30px;
}

.avatar-container {
    display: flex;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    overflow: hidden;
}

.avatar-container img {
    width: 100%;
    object-fit: cover;
}


.user-basic-info {
    margin-bottom: 4px;
}

.username {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin: 4px;
}

.user-id {
    font-size: 13px;
    color: #666;
    margin: 4px;

}

.edit-btn {
    position: absolute;
    right: 16px;
    top: 100px;
    background-color: #1890ff;
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 15px;
    border: none;
    cursor: pointer;
}

.info-section {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    padding: 16px;
    border-bottom: 1px solid #eaeaea;
}

.info-item {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: #E9F5FF;
    color: #007AFF;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.phone-icon {
    background-color: #FFF2E3;
    color: #FF9500;
}

.email-icon {
    background-color: #E3FFF2;
    color: #34C759;
}

.time-icon {
    background-color: #F2E3FF;
    color: #AF52DE;
}

.login-icon {
    background-color: #FFE3E3;
    color: #FF3B30;
}

.password-icon {
    background-color: #E3EEFF;
    color: #5856D6;
}

.verify-icon {
    background-color: #FFF9E3;
    color: #FFCC00;
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: 12px;
    color: #8E8E93;
    margin-bottom: 4px;
}

.info-value {
    font-size: 16px;
    color: #1C1C1E;
}

.info-action {
    color: #8E8E93;
    display: flex;
    align-items: center;
}

.verify-status {
    color: #34C759;
    font-size: 12px;
    margin-right: 8px;
}

.AuthorVerifyDialogBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logout-button {
    display: block;
    width: 100%;
    padding: 14px 0;
    background-color: #007AFF;
    color: white;
    text-align: center;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 20px;
    cursor: pointer;
}
</style>